import { Dropdown, Flex } from "antd"
import { PropsWithChildren } from "react"

const TableActions: React.FC<PropsWithChildren<TableActionsProps>> = props => {
  const showChildren = Array.isArray(props.children) ? 
    props.children.map(child => 
      child.props.accessible === false ? ({...child, props: {...child.props, children: child.props.fallback}}) : child
    ).filter(child => child.props.children) 
    : props.children

  const getMenus = () => {
    const menus: {key: React.Key, label: React.ReactNode}[] = [];
    (showChildren as any[]).forEach((child, childIndex) => {
      if (childIndex > 2) {
        menus.push({key: childIndex, label: child})
      }
    })
    return menus
  }
  
  const count = Array.isArray(showChildren) ? showChildren.length : 1

  if (count <= (props.count || 4)) {
    return <Flex gap={8} style={{width: 'max-content'}}>
      {showChildren}
    </Flex>
  }
  return <Flex gap={8} style={{width: 'max-content'}}>
    {(showChildren as any[])[0]}
    {(showChildren as any[])[1]}
    {(showChildren as any[])[2]}
    <Dropdown menu={{
      items: getMenus()
    }}><a>更多</a></Dropdown>
  </Flex>
}

export default TableActions
